<template>
	<div class="layout-pd">
    <zh-header-toolbar>
			<zh-button style="margin-left: 8px" button-type="add" @click="clearCahce">清除缓存</zh-button>
			<zh-button style="margin-left: 8px" button-type="add" @click="addDict">新增字典</zh-button>
			<zh-button style="margin-left: 8px" button-type="add" @click="copyDict">复制新增字典</zh-button>
			<zh-button style="margin-left: 8px" button-type="edit" @click="editDict">编辑字典</zh-button>
			<zh-button style="margin-left: 8px" button-type="del" @click="deleteDict">删除</zh-button>
		</zh-header-toolbar>
		<zh-space>
			<zh-card title="">
				<zh-form ref="dictQueryForm" :model="state.queryParam">
					<zh-form-select
						prop="dictField"
						label="字典字段"
						placeholder="请选择"
						:options="state.dictDataField.fieldData"
						:fieldNames="{
							label: 'fieldName',
							value: 'dictField'
						}"
						v-model="state.queryParam.dictField"
					></zh-form-select>
					<zh-form-input prop="fieldName" label="字段名称" placeholder="支持模糊查询" v-model="state.queryParam.fieldName"></zh-form-input>
					<template v-if="state.advanced">
						<zh-form-select prop="status" label="状态" :options="state.statusDict" v-model="state.queryParam.status"></zh-form-select>
						<zh-form-input prop="dictKey" label="字典值" placeholder="精确查找" v-model="state.queryParam.dictKey"></zh-form-input>
						<zh-form-input prop="dictValue" label="字典名称" placeholder="支持模糊查询" v-model="state.queryParam.dictValue"></zh-form-input>
					</template>
					<zh-form-query v-model="state.advanced" :form-ref="dictQueryForm" :table-ref="dictListTable"></zh-form-query>
				</zh-form>
			</zh-card>
			<zh-table
				ref="dictListTable"
				title="字典列表"
				:height="600"
				funcCode="dict0001"
				:columns="state.tableColumn"
				:disabled="false"
				highlight-current-row
			>
				<template #status_default="{ row }">
					<zh-badge :status="statusMap[row.status].status" :text="statusMap[row.status].text" />
				</template>
				<template #fixed_default="{ row }">
					<zh-badge :status="flagMap[row.fixed].status" :text="flagMap[row.fixed].text" />
				</template>
			</zh-table> 
		</zh-space>

		<zh-dialog :title="state.modalTitle" width="85%" v-model="state.visible" @confirm="saveDict">
			<dict-form ref="dictPage" :dictInfo="state.selectData" v-model="state.visible" />
		</zh-dialog>
		
	</div>
</template>

<script lang="ts" setup name="dictManager">
import DictForm from '@/views/system/params/DictManager/component/DictForm.vue';

//------------------定义子组件---------------------------
const dictQueryForm = ref<any>({});
const dictListTable = ref<any>({});
const dictPage = ref<any>({});

//------------------内部变量定义-------------------------
const statusMap = {
	0: {
		status: 'error',
		text: '禁用',
	},
	1: {
		status: 'processing',
		text: '启用',
	},
};
const flagMap = {
	0: {
		status: 'default',
		text: '否',
	},
	1: {
		status: 'success',
		text: '是',
	},
};
const state = reactive({
	description: '数据字典管理',
	dictDataField: {} as any,
	statusDict: [
		{
			dictKey: '0',
			dictValue: '禁用',
		},
		{
			dictKey: '1',
			dictValue: '启用',
		},
	],
	visible: false,
	form: null,
	// 高级搜索 展开/关闭
	advanced: false,
	// 查询参数
	queryParam: {
		dictField: undefined,
		fieldName: undefined,
		status: undefined,
		dictKey: undefined,
		dictValue: undefined,
	},
	// 表头
	loading: false,
	tablePage: {
		total: 0,
		currentPage: 1,
		pageNum: 1,
		pageSize: 20,
	},
	tableColumn: [
		{ type: 'checkbox', width: 50, fixed: 'left' },
		{ type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号' },
		{ field: 'sysId', title: '字典Id', fixed: 'left', visible: false, align: 'center', width: 150 },
		{ field: 'dictField', title: '所属字段', align: 'center', fixed: 'left', width: 150 },
		{ field: 'fieldName', title: '所属字段名称', align: 'center', width: 250 },
		{ field: 'dictKey', title: '字典属性', align: 'center', width: 150 },
		{ field: 'dictValue', title: '字典属性名称', align: 'center', width: 250 },
		{
			field: 'status',
			title: '状态',
			align: 'center',
			width: 80,
			slots: {
				default: 'status_default',
			},
		},
		{
			field: 'fixed',
			title: '是否可编辑',
			align: 'center',
			width: 80,
			slots: {
				default: 'fixed_default',
			},
		},
		{ field: 'classify', title: '所属分类', align: 'center', width: 150 },
		{ field: 'parentField', title: '父字段', align: 'center', width: 150 },
		{ field: 'parentFieldName', title: '父字段名称', align: 'center', width: 250 },
		{ field: 'parentKey', title: '父字典属性', align: 'center', width: 150 },
		{ field: 'parentDictValue', title: '父字典属性名称', align: 'center', width: 250 },
		{ field: 'orderNo', title: '排序', align: 'center', width: 80 },
		{ field: 'rate', title: '级别', align: 'center', width: 80 },
		{ field: 'orgId', title: '所属组织编码ID', visible: false, align: 'center', width: 80 },
		{ field: 'orgNumber', title: '所属组织编码', align: 'center', width: 80 },
		{ field: 'orgName', title: '所属组织名称', align: 'center', width: 250 },
		{ field: 'icon', title: '图标', align: 'center', width: 250 },
		{ field: 'remarks', title: '备注', align: 'center', showOverflow: true, width: 350 },
	],
	modalTitle: '操作',
	selectData: {} as any,
});

//------------------定义调用方法-------------------------
function addDict() {
	state.modalTitle = '新增字典信息';
	state.selectData = {};
	state.visible = true;
}
function copyDict() {
	state.modalTitle = '复制新增字典信息';
	const thisChecked = dictListTable.value.getCheckboxRecords();
	if (!thisChecked) {
		$messageBox.warning('请先选择需要复制的数据', '提示');
		return;
	}
	if (thisChecked.length === 1) {
		const dict = thisChecked[0];
		delete dict.sysId;
		state.selectData = dict;
		state.visible = true;
	} else if (thisChecked.length === 0) {
		$messageBox.warning('请先选择需要复制的数据', '提示');
	} else {
		$messageBox.warning('只能勾选一条数据复制', '提示');
	}
}
function editDict() {
	const thisChecked = dictListTable.value.getCheckboxRecords();
	if (!thisChecked) {
		$messageBox.warning('请先选择需要修改的数据', '提示');
		return;
	}
	if (thisChecked.length === 1) {
		state.modalTitle = '修改字典信息';
		state.selectData = thisChecked[0];
		if (state.selectData.fixed === '0') {
			$messageBox.warning('不可编辑数据不能修改', '提示');
			return;
		}
		state.visible = true;
	} else if (thisChecked.length === 0) {
		$messageBox.warning('请先选择需要修改的数据', '提示');
	} else {
		$messageBox.warning('只能勾选一条数据修改', '提示');
	}
}
function saveDict() {
	dictPage.value.saveDict().then((flag) => {
		if (!flag) {
			const params = {};
			$api.common.send.post('dict0024', params).then((res) => {
				state.dictDataField = res.result;
			});
		}
		dictListTable.value.refresh(state.queryParam);
	});
}
function deleteDict() {
	const sysIds: any[] = [];
	let flag=false;
	const selectReserveRecords = dictListTable.value.getCheckboxReserveRecords();
	if (selectReserveRecords && selectReserveRecords.length > 0) {
		selectReserveRecords.forEach((item) => {
			if (item.fixed === '0') {
				flag=true;
			}
			sysIds.push(item.sysId);
		});
	}
	const thisChecked = dictListTable.value.getCheckboxRecords();
	if (thisChecked && thisChecked.length > 0) {
		thisChecked.forEach((item) => {
			if (item.fixed === '0') {
				flag=true;
			}
			sysIds.push(item.sysId);
		});
	}
	if(flag){
		$messageBox.warning('选择的数据存在不可编辑数据，不能删除', '提示');
		return;
	}
	if (sysIds.length > 0) {
		const params = {
			sysIds: sysIds,
		};
		setTimeout(() => {
				$api.common.send.post('dict0007', params)
				.then(() => {
					$messageBox.success('删除字典成功', '成功提示');
					dictListTable.value.query(state.queryParam);
				})
				.catch(() => {});
		}, 20);
	} else {
		$messageBox.warning('请先选择需要删除的数据', '提示');
	}
}

function clearCahce() {
	const params = {
		dictField: state.queryParam.dictField,
	};
	setTimeout(() => {
		$api.common.send.post('dict0008', params)
			.then(() => {
				$messageBox.success('清除成功', '成功提示');
			})
			.catch(() => {});
	}, 20);
}

//------------------初始化------------------------------
// 数据字典初始化
const params = {};
$api.common.send.post('dict0024', params).then((res) => {
	state.dictDataField = res.result;
});
onMounted(() => {
  nextTick(()=>{
    dictListTable.value.query(state.queryParam);
  })
});
</script>
